<template>
  <div>
    <van-nav-bar title="分类" />
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <div style="display: flex">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="item in types"
          :key="item.id"
          :title="item.title"
          @click="itemClick(item.type)"
        />
      </van-sidebar>

      <div style="flex: 1">
        <p v-for="item in list" :key="item.id" style="font-size: 12px">
          {{ item.product_name }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getTypes, getTypesProducts } from "@/api/api";
export default {
  data() {
    return {
      value: "",
      active: 0,
      types: [],
      list: [],
    };
  },
  mounted() {
    this.getType();
    // this.getList();
  },
  methods: {
    async getType() {
      const res = await getTypes();
      this.types = res.data;
      this.getList(this.types[0].type);
    },
    async getList(type) {
      const res = await getTypesProducts({ type: type });
      this.list = res.data;
    },
    itemClick(type) {
      this.getList(type);
    },
  },
};
</script>

<style lang="less">
.van-sidebar-item--select:before {
  background-color: orange;
}
</style>
